<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <p style="float: left">
            <el-icon color="#409EFF" :size="50">
              <ElementPlus />
            </el-icon>
          </p>
          <p style="float: left; font-size: 25px; font-weight: bold">
            创意设计中心工单系统
          </p>
        </div>
      </el-header>
      <el-main>
        <el-card class="login_card">
          <el-form
            :model="form"
            :rules="rules"
            ref="ruleFormRef"
            label-width="80px"
          >
            <el-form-item label="账号：" prop="username">
              <el-input v-model="form.username" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="form.password"
                @keyup.enter="onSubmit"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit()">登录</el-button>
              <el-button type="primary" @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-main>
      <!-- <el-footer>
        <p>关于我们 | 联系我们 | 人才招聘 | 广告服务 | 友情链接 | 知否社区 | 知否公益</p>
        <p>Copyright © 2001-2022 <el-tag>公众号：知否技术</el-tag></p>
      </el-footer> -->
    </el-container>
  </div>
</template>

<script setup>
import userApi from '../api/user'
import { reactive, ref, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import router from '../router/index'
import tool from '../tools/tool'

const { proxy } = getCurrentInstance()
const form = reactive({
  username: '',
  password: '',
})
const ruleFormRef = ref()
const rules = reactive({
  username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
})
const onSubmit = () => {
  if (!ruleFormRef) return
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      const res = await userApi.login(form)
      if (res.data.length != 0) {
        // 登录成功后，将用户名存储在 sessionStorage 中
        sessionStorage.setItem('username', res.data[0].name)
        sessionStorage.setItem('role',res.data[0].role)
        sessionStorage.setItem('type',res.data[0].type)
        if(tool.isLeader()){
          proxy.$commonJs.changeView('/home')
          router.push('/home')
        }else{
          proxy.$commonJs.changeView('/work_mine')
          router.push('/work_mine')
        }
      } else {
        ElMessage.error('用户名或者密码错误')
      }
    } else {
      return false
    }
  })
}
const resetForm = () => {
  if (!ruleFormRef) return
  ruleFormRef.value.resetFields()
}
</script>

<style scoped>
.el-container {
  width: 100vw;
  height: 100vh;
}

.el-header {
  height: 80px;
}

.el-main {
  width: 100%;
  height: 100%;
  background-image: url('../assets/img/bg.jpg');
  background-repeat: no-repeat;
  background-size: 100% auto;
}


.login_card {
  margin: 100px 200px;
  width: 20%;
  min-width: 300px;
  height: 200px;
  border-radius: 10px;
}

.el-footer {
  height: 10%;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .login_card {
    margin: 20px;
    width: 80%;
  }
  .el-main {
    background-size: cover;
    overflow: hidden;
  }
}
</style>
